<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据汇总</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <style>
        .layuiadmin-card-list p.layuiadmin-big-font{
            font-size: 31px;
        }
    </style>
</head>
<body>

<div class="layui-fluid">

    <div class="layui-row layui-col-space15">

        <div class="layui-col-sm6 layui-col-md6 header-data">
            <div class="layui-card">
                <div class="layui-card-header">
                    <span style="color: #999;font-size: 13px;">近30天充值</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">{$summary.30_total_recharge}</p>
                    <p>
                        今日充值
                        <span class="layuiadmin-span-color">{$summary.today_total_recharge}</span>
                    </p>
                </div>
            </div>
        </div>

        <div class="layui-col-sm6 layui-col-md6 header-data">
            <div class="layui-card">
                <div class="layui-card-header">

                    <span style="color: #999;font-size: 13px;">累计用户</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">{$summary.total_user_num}</p>
                    <p>
                        已加桌
                        <span class="layuiadmin-span-color">{$summary.total_user_jiazhuo}</span>
                    </p>

                </div>
            </div>
        </div>


        <div class="layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-header">
                    近30天用户增长趋势
                </div>
                <div class="layui-card-body">
                    <div class="layui-row">
                        <div class="layui-col-sm12">
                            <div id="LAY-user-growth-trend" style="width:100%;height: 300px">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-sm12">
            <div class="layui-row layui-col-space15">

                <div class="layui-col-sm12">
                    <div class="layui-card">
                        <div class="layui-card-header">充值用户排行榜(不含今日)</div>
                        <div class="layui-card-body">
                            <table class="layui-table layuiadmin-page-table" lay-skin="line">
                                <thead>
                                <tr>
                                    <th style="text-align: center">序号</th>
                                    <th style="text-align: center">用户</th>
                                    <th style="text-align: center">充值金额</th>
                                    <th style="text-align: center">注册时间</th>
                                </tr>
                                </thead>
                                <tbody>

                                {empty name="userRechargeRank"}
                                <tr>
                                    <td align="center" colspan="4">无数据</td>
                                </tr>
                                {else /}
                                {volist name="userRechargeRank" id="v" key="k"}
                                <tr>
                                    <td align="center">{$k}</td>
                                    <td align="center">{$v.nickname}（ID：{$v.uid}）</td>
                                    <td align="center"><span>{$v.money}</span></td>
                                    <td align="center">{$v.create_time}</i></td>
                                </tr>
                                {/volist}
                                {/empty}


                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

<script src="/static/layuiadmin/layui/layui.js"></script>
<script src="/static/layuiadmin/lib/extend/echarts.min5.4.3.js"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
        ,version: 1

    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index']);

    var user_growth_x = {$days};

    var user_growth_y_xz = {$new_user_num_growth};
    var user_growth_y_gz = {$jiazhuo_user_num_growth};

    var option = {
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(50,50,50,0.5)',   // 提示背景颜色，默认为透明度为0.7的黑色
            textStyle: {
                color: "#fff"
            },
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
        calculable : true,
        legend: {},

        xAxis : [
            {
                type : 'category',
                boundaryGap: false,
                data : user_growth_x
            }
        ],
        yAxis : [
            {
                type : 'value',
                name : '',
                axisLabel : {
                    formatter: '{value} '
                },
                axisLine: {
                    show: true
                }
            },
            {
                type : 'value',
                name : '',
                axisLabel : {
                    formatter: '{value} '
                },
                axisLine: {
                    show: true
                }
            }
        ],
        series : [
            {
                name:'新增用户',
                type:'line',
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data: user_growth_y_xz
            },
            {
                name:'加桌用户',
                type:'line',
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data:user_growth_y_gz
            },
        ]
    };

    var myChart = echarts.init(document.getElementById('LAY-user-growth-trend'));
    myChart.setOption(option);
    window.onresize = myChart.resize;



</script>
</body>
</html>